<template>
  <div class="JobList" v-if="data">
    <div class="myul" :sty="sty">
      <div class="list" v-for="(item,i) in data" :key="i" @click="ck(i)">
        <div class="top">
          <h4>{{item.title}}</h4><span>{{item.salary}}</span>
        </div>
        <div class="label">
          <span v-for="(lab,index) in item.label" :key="index">{{lab}}</span>
        </div>
        <div class="scale">
          <span>{{item.enterprise.company}}</span><span>{{item.enterprise.personnel}}</span>
        </div>
        <div class="text">
          <div class="t_l">
            <span class="img" :style="'background-image:url('+URL+item.img+'.svg)'"></span><span class="txt">{{item.hiring.hr}}·{{item.hiring.name}}</span>
          </div>
          <span class="t_r">{{item.region}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:['data','sty'],
  data(){
    return {
      // data:null
    }
  },
  computed:{
    
  },
  methods :{
    ck(i){
      this.$parent.ck(i)
    }
  },
  created(){
    // this.data = this.$store.getters.data.position
  }
}
</script>
<style lang="scss" scoped>
  .JobList {
    width: 100vw;
    .myul { 
      margin-top: 2px;
      width: 100%;
      height: 600px;
      overflow: auto;
      // z-index: -1;
      background: #F5F6F5;
      .list{
        // border: 1px solid red;
        // width: 100%;
        padding: 10px 20px;
        background: #fff;
        margin-bottom:10px;
        div {
          margin: 8px 0;
        }
        .top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          span{
            color: #36C1BB;
            font-weight: bold;
          }
        }
        .label {
          display: flex;
          span {
            margin-right: 5px;
            padding: 1% 2% 1% 2%;
            background: #F5F6F5;
            border-radius: 3px;
            font-size: 12px;
            color: #696968;
          }
        }
        .scale {
          span {
            margin-right: 10px;
            font-size: 14px;
          }
        }
        .text {
          margin-bottom: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // text-align: center;
          position: relative;
          span{
            color: #C2C2C1;
            font-size: 12px;
          }
          div {
            display: flex;
            align-items: center;
            .txt{
              // position: relative;
              // font-weight: bold;
              font-size: 14px;
              color: #000;
              margin-left: 10px;
            }
            .img {
              display: inline-block;
              width: 28px;
              height: 28px;
              border-radius: 50%;
              // background: red;
              background-size: 100%;
              // position: absolute;
              // top:-4px;
              // left: -3px;
            }
          }
        }
      }
    }
  }
</style>